<template>
  <div class="process-detail">
    <div class="first-row" style="margin: 0 0 20px 0;">
      <i class="el-icon-picture" />
      <span class="operate-type">检查情况</span>
    </div>
    <!--实测实量-->
    <div class="process-detail-scsl" v-if="rowData.scoreType==SCORE_TYPE.ZLSCSL">
      <div class="row1">
        <span class="label">实际数量：</span><span class="value">{{ rowData.checkTotal }}<span class="rule-unit">{{ rowData.ruleUnit || '处' }}</span></span>
      </div>
      <div class="row2">
        <span class="label">合格数量：</span>
        <span class="value" :class="{red: rowData.goodTotal < rowData.checkTotal}">{{ rowData.goodTotal }}<span class="rule-unit">{{ rowData.ruleUnit || '处' }}</span></span>
      </div>
    </div>
    <!--按规则计分-->
    <div v-else class="process-detail-rule">
      <!--符合条款-->
      <div v-if="rowData.ruleType==RULE_TYPE.FHTK" class="process-detail-fhtk">
        <div class="row1">
          <span class="label">符合条款：</span>
          <el-radio-group v-model="rowData.result" class="custom-radio" disabled>
            <el-radio :label="accord.value" v-for="(accord, aindex) in accordOptions" :key="'accord' + aindex">{{ accord.name }}</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!--合格计分-->
      <div v-else-if="rowData.ruleType==RULE_TYPE.HGJF" class="process-detail-hgjf">
        <div class="row1">
          <span class="label">实际数量：</span><span class="value">{{ rowData.checkTotal }}<span class="rule-unit">{{ rowData.ruleUnit || '处' }}</span></span>
        </div>
        <div class="row2">
          <span class="label">合格数量：</span>
          <span class="value" :class="{red: rowData.goodTotal < rowData.checkTotal}">{{ rowData.goodTotal }}<span class="rule-unit">{{ rowData.ruleUnit || '处' }}</span></span>
        </div>
      </div>
      <!--观感 户内与外立面-->
      <div
        v-else-if="rowData.scoreType==SCORE_TYPE.ZLGG && (rowData.locationType == LOCATION_TYPE.HN || rowData.locationType == LOCATION_TYPE.WLM)"
        class="process-detail-gghw"
      >
        <div class="row1">
          <span class="label">违反数量：</span>
          <div v-for="item in rowData.deductArr" :key="item.key" class="room-build-item value">
            <span class="label" v-if="rowData.deductArr.length > 1">{{ item.label }}：</span>
            <span class="red">{{ item.value }}</span>
            <span class="rule-unit">{{ rowData.ruleUnit || '处' }}</span>
          </div>
        </div>
      </div>
      <!--违反数量-->
      <div v-else class="process-detail-badtotal">
        <div class="row1">
          <span class="label">违反数量：</span><span class="value red">{{ rowData.badTotal }}<span class="rule-unit">{{ rowData.ruleUnit || '处' }}</span></span>
        </div>
      </div>
      <!--条件条款-->
      <div v-if="rowData.ruleType === RULE_TYPE.TJTK && rowData.conditionOptions" class="operater-condition">
        <el-radio-group v-model="rowData.itemSel" disabled class="custom-radio">
          <el-radio :label="condition.name" v-for="(condition, cindex) in rowData.conditionOptions" :key="'condition' + cindex">{{ condition.name }}</el-radio>
        </el-radio-group>
      </div>
      <!--<div class="rule-type">
        <span class="label">评判规则：</span>
        <span class="value">{{ rowData.ruleContent }}</span>
      </div>-->
    </div>
    <div v-if="rowData.areaList.length > 0" class="row2">
      <span class="label">检查位置：</span>
      <div class="area-list">
        <div class="item" v-for="(areaItem, areaIndex) in rowData.areaList" :key="'area-item' + areaIndex" :title="areaItem.shortName">
          <el-image class="img g-img-placeholder" :src="areaItem.url" fit="cover" :initial-index="areaIndex" :preview-src-list="rowData.areaList.map(i => i.url)" />
          <div class="area-name ellipsis2" v-if="rowData.unitType">{{ areaItem.shortName || '暂无位置' }}</div>
        </div>
      </div>
    </div>
    <div v-if="rowData.remark" class="row1" style="margin: 10px 10px 0 0;">
      <span class="label">备注：</span>
      <span class="value remark">{{ rowData.remark }}</span>
    </div>
    <div v-for="rectify in rowData.rectifyRecords" :key="rectify.rectifyRecordId" class="record-item">
      <div class="first-row">
        <i class="el-icon-picture" />
        <span class="operate-type">{{ dict.label.cq_rectify_operate[rectify.operateType] }}情况</span>
      </div>
      <div class="record-operate-info">
        <div class="row1" style="margin: 10px 10px 0 0;">
          <span class="label" style="text-align: left;">操作人：</span>
          <span class="value remark">{{ rectify.updatorName }}</span>
        </div>
        <div class="row1" style="margin: 10px 10px 0 0px;">
          <span class="label">操作时间：</span>
          <span class="value remark" style="min-width: 150px;">{{ rectify.updateTime }}</span>
        </div>
        <div class="row1" style="margin: 10px 10px 0 0px;">
          <span class="label">操作描述：</span>
          <span class="value remark">{{ rectify.reason }}</span>
        </div>
      </div>
      <div>
        <el-image v-for="(file, findex) in rectify.sysFiles" :key="file.id" class="img item g-img-placeholder" :src="file.url" fit="cover" :initial-index="findex" :preview-src-list="rectify.sysFiles.map(i => i.url)" />
      </div>
    </div>
  </div>
</template>

<script>
import { RULE_TYPE, SCORE_TYPE, LOCATION_TYPE} from '@/utils/baseData'
export default {
  name: 'ProcessDetail',
  props: {
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  dicts: ['cq_rectify_operate'],
  data() {
    return {
      RULE_TYPE: RULE_TYPE,
      SCORE_TYPE: SCORE_TYPE,
      LOCATION_TYPE: LOCATION_TYPE,
      list: [
        {}
      ],
      accordOptions: [
        {
          name: '符合',
          value: 10
        },
        {
          name: '不符合',
          value: 11
        }
      ]
    }
  },
  created() { // 初始化
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped lang='scss'>
 .process-detail {
   margin-left: 60px;
   .item {
     margin: 10px 10px 0 0;
   }
   .img {
     width: 80px;
     height: 80px;
     border-radius: 6px;
     cursor: pointer;
   }
   .area-list {
     display: flex;
     flex-wrap: wrap;
     .area-name {
       margin-top: 6px;
       height: 32px;
       font-size: 12px;
       line-height: 16px;
       width: 84px;
       &:hover {
         color: #409eff;
       }
     }
   }
   .red {
     color: #f56c6c;
   }
   .room-build-item {
     margin: 0 10px 0px 0;
   }
   .row1 {
     display: flex;
     align-items: center;
   }
   .row2 {
     margin-top: 4px;
     display: flex;
     span:nth-child(1) {
       margin-top: 10px;
     }
   }
   .label {
     flex-shrink: 0;
     white-space: nowrap;
     margin-right: 10px;
     min-width: 70px;
     text-align: right;
   }
   .value {
     display: inline-block;
     min-width: 80px;
     background-color: #eff2f9;
     padding: 6px 10px;
     line-height: 30px;
     border-radius: 4px;
     vertical-align: middle;
     white-space: pre-wrap;
   }
   .remark {
     line-height: 20px;
     padding: 10px;
   }
   .rule-unit {
     color: #646f7c;
     margin-left: 6px;
   }
   .process-detail-hgjf,
   .process-detail-scsl {
     display: flex;
     .row1 {
     }
     .row2 {
       margin-left: 20px;
     }
   }
   .process-detail-rule {
     display: flex;
     align-items: center;
     .operater-condition {
       margin-left: 80px;
     }
   }
   .process-detail-badtotal {

   }
   .rule-type {
     margin-top: 10px;
   }
   .record-item {
     border-top: 1px solid #e2e2e2;
     margin-top: 16px;
   }
   .first-row {
     margin: 10px 0;
     padding-top: 10px;
     font-size: 14px;
     .operate-type {
       display:inline-block;
       width: 100px;
       font-weight: bold;
       margin-left: 6px;
     }
   }
   .record-operate-info {
     display: flex;
     margin-bottom: 10px;
     .row1:nth-child(1) {
       width: 20%;
     }
     .row1:nth-child(2) {
       width: 30%;
     }
     .row1:nth-child(3) {
       width: 50%;
     }
   }
 }
</style>
